import { Button, message, Modal, Space } from 'ant-design-vue'
import { defineComponent, nextTick, ref, watch } from 'vue'

import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { useDialog } from '@/hooks'

import SiteList from './siteList'

export default defineComponent({
  name: 'SiteSelectList',
  props: {
    sites: {
      type: Array,
      required: true
    }
  },
  emits: ['dataCallback'],
  setup(props, { emit }) {
    const { showConfirm } = useDialog()
    const showSiteModal = ref(false)
    const siteList = ref<ComponentRef>({})
    const siteSelect = ref(props.sites as any[])

    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: 400,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '站点名称',
            field: 'storeName',
            minWidth: 150
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ]
      }
    } as ProTableProps)

    watch(
      () => props.sites,
      () => {
        siteSelect.value = props.sites
      },
      {
        immediate: true
      }
    )

    function handleDeleteSite(row) {
      showConfirm({
        content: '确认删除该站点？',
        onOk: () => {
          siteSelect.value = siteSelect.value.filter(val => {
            return val.storeId != row.storeId
          })
          handleCallback()
        }
      })
    }

    function handleShowSiteSelect() {
      showSiteModal.value = true
      nextTick(() => {
        siteList.value!.showModal(siteSelect.value)
      })
    }

    function handleSiteSelect() {
      const list = siteList.value!.handleSiteSelect().map(val => {
        return { storeId: val.locationId, storeName: val.city }
      })
      if (siteSelect.value) {
        siteSelect.value = siteSelect.value.concat(list)
      } else {
        siteSelect.value = list
      }
      handleCallback()
      showSiteModal.value = false
    }

    function handleCallback() {
      emit('dataCallback', siteSelect.value)
    }

    function handleCleanData() {
      siteSelect.value = []
    }

    return {
      tableRef,
      tableConfig,
      siteList,
      siteSelect,
      showSiteModal,
      handleSiteSelect,
      handleDeleteSite,
      handleShowSiteSelect,
      handleCleanData
    }
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.handleShowSiteSelect}>
          选择站点
        </Button>
        <ProTable
          ref="tableRef"
          data={this.siteSelect}
          v-show={this.siteSelect?.length > 0}
          style={{ width: '450px', marginTop: '10px' }}
          v-slots={{
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDeleteSite(row)}
                >
                  删除
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showSiteModal}
          title="选择站点"
          destroyOnClose
          onOk={this.handleSiteSelect}
          width={900}
        >
          <SiteList ref="siteList" />
        </Modal>
      </div>
    )
  }
})
